<template>
  <div class="pageBox">
    <head-component title="商学院" :back="false"></head-component>
    <div class="content">
      <div class="swipeBox">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in banner" :key="item.id">
            <img class="banner" :src="item.image" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="tabsBox">
        <van-tabs
          v-model:active="active"
          title-inactive-color="#1F0F26"
          title-active-color="#1F0F26"
          line-width="24px"
          @change="change"
        >
          <van-tab
            :title="item.typeName"
            :name="item.id"
            v-for="item in tabList"
            :key="item.id"
          ></van-tab>
        </van-tabs>
      </div>

      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <div class="list">
          <div
            class="listItem flex-between"
            v-for="item in list"
            :key="item.id"
            @click="goDetails(item)"
          >
            <div class="listItemLeft">
              <div>{{ item.title }}</div>
              <p>{{ item.introduction }}</p>
            </div>
            <img class="listItemImg" :src="item.imgUrl" alt="" />
          </div>
        </div>
      </van-list>
    </div>
    <foot-component tab="2"></foot-component>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import footComponent from "../../components/footComponent.vue";
import router from "../../router";
import { post } from "../../untils/request";

export default defineComponent({
  components: {
    headComponent,
    footComponent,
  },
  setup() {
    const banner = ref([]);
    const active = ref("");
    const tabList = ref([]);

    const page = ref(1);
    const lastId = ref(0);
    const list = ref([]);
    const loading = ref(true);
    const finished = ref(false);

    function onLoad() {
      post("/portal", {
        module: "Business",
        interface: "1000",
        data: {
          page: page.value,
          lastId: lastId.value,
          typeId: active.value,
        },
      }).then((res) => {
        banner.value = res.data.slide;
        tabList.value = res.data.types;
        let datas = res.data.list;
        if (datas) {
          list.value = list.value.concat(datas);
          loading.value = false;
        }
        lastId.value = res.data.lastId;
        page.value = res.data.currentPage + 1;
        if (page.value > res.data.lastPage) {
          loading.value = false;
          finished.value = true;
        }
      });
    }
    onLoad();

    function refresh() {
      page.value = 1;
      lastId.value = 0;
      list.value = [];
      loading.value = true;
      finished.value = false;
      onLoad();
    }

    function change() {
      refresh();
    }

    function goDetails(param) {
      router.push({
        path: "/businessDetails",
        query: {
          id: param.id,
        },
      });
    }

    return {
      banner,
      active,
      loading,
      finished,
      lastId,
      page,
      list,
      tabList,
      change,
      goDetails,
      onLoad,
      refresh,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  padding-top: 88px;
  padding-bottom: 136px;
  .content {
    padding: 0 30px;
    .swipeBox {
      height: 300px;
      margin-top: 20px;
      :deep(.van-swipe) {
        height: 300px;
      }
      :deep(.van-swipe-item) {
        height: 300px;
      }
      .banner {
        width: 100%;
        height: 300px;
      }
    }
    .tabsBox {
      :deep(.van-tabs__line) {
        background: #e00b12;
      }
    }
    .list {
      .listItem {
        padding: 50px 0;
        border-bottom: 2px solid #ebedf0;
        align-items: flex-start;
        .listItemLeft {
          padding-right: 30px;
          div {
            font-size: 34px;
            font-weight: 500;
            color: #1a1a1a;
          }
          p {
            font-size: 26px;
            font-weight: 400;
            color: #808080;
            margin-top: 24px;
          }
        }
        .listItemImg {
          width: 220px;
          height: 164px;
          border-radius: 8px;
        }
      }
    }
  }
}
</style>